<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义JS对象</title>
    <style>
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>名称</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<script>
    let p1 = {
        name: '张三',
        age: 18,
        sex: '男',
        say: function () {
            console.log('我是' + this.name + '今年' + this.age + '岁')
        }
    }
    console.log(p1)
    p1.say()
    //先定义一个空对象,再给对象添加属性和方法
    let p2 = {}
    p2.name = '李四'
    p2.age = 20
    p2.eat = function () {
        console.log(this.name + '正在吃东西')
    }
    console.log(p2)
    p2.eat()
    //定义一个数组,存放多个商品对象
    let goods = [
        {
            name: 'iphone',
            price: 8000,
            num: 10000
        },
        {
            name: 'vivo',
            price: 5000,
            num: 2000
        },
        {
            name: '华为',
            price: 6000,
            num: 500
        },
        {
            name: '小米',
            price: 5000,
            num: 100
        }
    ]
    console.log(goods)
    console.log(goods[2])
    let tableE = document.querySelector('table')
    for (let i = 0; i < goods.length; i++) {
        let trE = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        titleTd.innerHTML = goods[i].name;
        priceTd.innerHTML = goods[i].price;
        numTd.innerHTML = goods[i].num;
        trE.append(titleTd, priceTd, numTd);
        tableE.append(trE);
    }
</script>
</body>
</html>